txtName.value = 'user-' + Math.floor(Math.random() * 10000).toString().padStart(4, '0');
let client;

btnJoin.onclick = e => {
	mainPanel.style.display = 'block';

	client = new Client(txtName.value, txtRoomId.value);
	vdLocal.appendChild(client.localVideo);
	vdRemote.appendChild(client.remoteVideo);

	client.peerConnection.addEventListener('connectionstatechange', e => {
		switch (e.target.connectionState) {
			case 'disconnected':
			case 'failed':
				if (client) {
					mainPanel.style.display = 'none';
					vdLocal.removeChild(client.localVideo);
					vdRemote.removeChild(client.remoteVideo);
					client.destroy();
					client = null;
				}
				break;
		}
	});
}

btnSendMessage.onclick = e => {
	client.sendData({ type: 'message', payload: txtSendMessage.value });
	txtSendMessage.value = '';
}